<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <linearGradient id="gradient1"
                x1="30%" y1="0"
                x2="70%" y2="0">
                <stop offset="0%" stop-color="#ff0" stop-opacity="1"/>
                <stop offset="100%" stop-color="#f00" stop-opacity="1"/>
            </linearGradient>
        </defs>
        <rect x="20" y="20" width="60" height="40" fill="url(#gradient1)"/>
        <rect x="38" y="20" width="24" height="40" fill="none" stroke="#66f" stroke-width=".5"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <radialGradient id="gradient2"
                r="30%" fr="20%" >
                <stop offset="0%" stop-color="#ff0" stop-opacity="1"/>
                <stop offset="100%" stop-color="#f00" stop-opacity="1"/>
            </radialGradient>
        </defs>

        <circle cx="50" cy="50" r="40" fill="url(#gradient2)"/>
        <circle cx="50" cy="50" r="24" fill="none" stroke="#66f" stroke-width=".5"/>
        <circle cx="50" cy="50" r="16" fill="none" stroke="#66f" stroke-width=".5"/>
        <!-- <path d="M0 50H100M30 0V100" fill="none" stroke="#99f" stroke-width=".8" /> -->
        
    </svg>
    <hr/>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <linearGradient id="gradient3"
                x1="30%" y1="0"
                x2="70%" y2="0"
                spreadMethod="repeat">
                <stop offset="0%" stop-color="#ff0" stop-opacity="1"/>
                <stop offset="100%" stop-color="#f00" stop-opacity="1"/>
            </linearGradient>
        </defs>
        <rect x="20" y="20" width="60" height="40" fill="url(#gradient3)"/>
        <rect x="38" y="20" width="24" height="40" fill="none" stroke="#66f" stroke-width="1"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <radialGradient id="gradient4"
                r="30%" fr="20%"  spreadMethod="repeat">
                <stop offset="0%" stop-color="#ff0" stop-opacity="1"/>
                <stop offset="100%" stop-color="#f00" stop-opacity="1"/>
            </radialGradient>
        </defs>

        <circle cx="50" cy="50" r="40" fill="url(#gradient4)"/>
        <circle cx="50" cy="50" r="24" fill="none" stroke="#66f" stroke-width="1"/>
        <circle cx="50" cy="50" r="16" fill="none" stroke="#66f" stroke-width="1"/>
        <!-- <path d="M0 50H100M30 0V100" fill="none" stroke="#99f" stroke-width=".8" /> -->
        
    </svg>

    <hr/>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <linearGradient id="gradient5"
                x1="40%" y1="0"
                x2="50%" y2="0"
                spreadMethod="reflect">
                <stop offset="0%" stop-color="#ff0" stop-opacity="1"/>
                <stop offset="100%" stop-color="#f00" stop-opacity="1"/>
            </linearGradient>
        </defs>
        <rect x="20" y="20" width="60" height="40" fill="url(#gradient5)"/>
        <rect x="38" y="20" width="24" height="40" fill="none" stroke="#66f" stroke-width=".5"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <radialGradient id="gradient6"
                r="30%" fr="20%"  spreadMethod="reflect">
                <stop offset="0%" stop-color="#ff0" stop-opacity="1"/>
                <stop offset="100%" stop-color="#f00" stop-opacity="1"/>
            </radialGradient>
        </defs>

        <circle cx="50" cy="50" r="40" fill="url(#gradient6)"/>
        <circle cx="50" cy="50" r="24" fill="none" stroke="#66f" stroke-width=".5"/>
        <circle cx="50" cy="50" r="16" fill="none" stroke="#66f" stroke-width=".5"/>
        <!-- <path d="M0 50H100M30 0V100" fill="none" stroke="#99f" stroke-width=".8" /> -->
        
    </svg>


    <script src="index.js"></script>
  </body>
</html>
